<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .content {
            width: 200px;
            height: 200px;
            margin-left: 300px;
            background-color: green;
        }
        .box {
            margin-left: 200px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="box"></div> 
            <!-- 从这里开始冒泡，不是视觉上的，而是代码结构上的 -->
        </div>
    </div>
    <!-- <script>
        // 点box会触发三个事件处理函数，叫做事件冒泡
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];

        wrapper.addEventListener('click', function(){
            console.log('wrapper');
        }, false);
        content.addEventListener('click', function(){
            console.log('content');
        }, false);
        box.addEventListener('click', function(){
            console.log('box');
        }, false);
    </script> -->

    <script>
        // 一个dom元素的一种事件类型，上的一个处理函数，只能遵循一种事件模型
        // 事件捕获，只有谷歌实现了，高版本火狐，opera也实现了
        // 点的谁，谁就是事件源元素
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];


        wrapper.addEventListener('click', function(){
            console.log('wrapperbubble');
        }, false);
        content.addEventListener('click', function(){
            console.log('contentbubble');
        }, false);
        box.addEventListener('click', function(){
            console.log('boxbubble');
        }, false);



        wrapper.addEventListener('click', function(){
            console.log('wrapper');
        }, true);
        content.addEventListener('click', function(){
            console.log('content');
        }, true);
        box.addEventListener('click', function(){
            console.log('box');
        }, true); 

        // 先捕获，后冒泡
        // 触发自身dom的事件，会按先后顺序执行，点击box 既不是捕获，又不是冒泡
    </script>



</body>
</html>